<template>
    <el-table :data="productData" border style="width: 100%" v-loading="tableLoading">
        <el-table-column align="center" prop="imageUrl" label="产品图片" width="180">
            <template #default="scope">
                <!-- <el-avatar :src="scope.row.imageUrl"></el-avatar> -->
                <img :src="scope.row.imageUrl" width="100" alt="">
            </template>
        </el-table-column>
        <el-table-column align="center" prop="productName" label="产品名称" width="180" />
        <el-table-column align="center" prop="description" label="产品描述" />
        <el-table-column align="center" prop="price" label="产品价格" />
        <el-table-column align="center" prop="inventory" label="产品库存" />
        <el-table-column align="center" prop="action" label="操作">
            <template #default="scope">
                <el-button type="primary" @click="handleCharge(scope.row)">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chongzhi"></use>
                    </svg>
                    <b style="margin-left:5px">充值</b>
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
import { ref, reactive, toRefs } from "vue"
import * as api from "@/api/vip"
import { ElMessageBox, ElMessage } from "element-plus"
import { useRouter } from 'vue-router'
let router = useRouter()
//表格数据
const productData = ref([])

//控制加载动画
let tableLoading = ref(false)

//获取产品的方法

let getVipProduct = async () => {
    tableLoading.value = true;
    try {
        let res = await api.getVipProductApi()
        // console.log(res)
        productData.value = res.data.data;
        tableLoading.value = false;
    } catch (e) {
        console.log(e)
    }
}
getVipProduct()

//去充值

let handleCharge = (row) => {
    console.log(row)
    // 先进行交互,询问用户是否要购买
    ElMessageBox({
        title: '充值提示',
        message: `您是否要充值<b style="color:red">${row.productName}</b>这个产品,请确认`,
        showCancelButton: true,
        cancelButtonText: '取消',
        confirmButtonText: '购买',
        dangerouslyUseHTMLString: true
    })
        .then(() => {

            //跳转到预支付页面,并且通过query传递当前产品的id
            router.push("/preorder?product_id=" + row.product_id,)
        })
        .catch(() => {
            ElMessage.warning('已取消购买')
        })
}
</script>
